<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div style="display: flex">
            <div class="report_header_left"></div>
            <!-- <svg-icon class="primary" :icon-class="$route.meta.icon"/>
            <span class="primary">{{$route.meta.title}}</span> -->
          </div>
          <div style="display: flex">
            <div :style="{'height': (headerType==false ? '41px':'')}" style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;">
              <div class="report_header_date">
                <queryDate @queryDateClick='queryDateClick'></queryDate>
              </div>
              <div class="report_header_query">
                <el-select  v-model="query.outShopId" clearable placeholder="调出仓库"
                            @focus="getShop" @clear="clearOut">
                  <el-option v-for="item in shopIdOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div class="report_header_query">
                <el-select  v-model="query.inShopId" @clear="clearIn" clearable placeholder="调入仓库"
                            @focus="getShop">
                  <el-option v-for="item in shopIdOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div class="report_header_query">
                <queryProductCategory @queryProductCategoryClick="queryProductCategoryClick"></queryProductCategory>
              </div>
              <div class="report_header_query">
                <queryProduct @queryProductClick="queryProductClick"></queryProduct>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport"  name="导出" />
            <!-- <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 5px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">
              <i style="font-size: 24px;color: white;" :class="[headerType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>
            </div> -->
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;"  @row-click="clickTr">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length-1?'总计':scope.$index +1}}</template>
          </el-table-column>

          <el-table-column prop="name" label="商品名称" header-align="center" :show-overflow-tooltip="true" width="250">
          </el-table-column>
          <el-table-column prop="sn" label="货号" header-align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="spec" width="120" header-align="center" :show-overflow-tooltip="true" label="规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="50" label="单位">
          </el-table-column>
          <el-table-column align="right" prop="quantity" label="调拨数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="100" header-align="center" label="调拨单价">
            <template slot-scope="scope">{{ scope.row.price == null?'':scope.row.price }}</template>
          </el-table-column>
          <el-table-column align="right" prop="totalAmt" width="120" header-align="center" label="销售金额">
          </el-table-column>
            <el-table-column align="center"  label="查看详情" >
              <template slot-scope="scope">
              <div class="justify_right shop_Height"  @click="clicklook(scope.row)">
              <a class="details_Title">明细详情</a>
            </div>
              </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Pagination from '@/components/Pagination';
  import ExportList2Excel from "@/components/ExportList2Excel";
  import {
    allocateCountReport,
    allocateSummary
  } from '@/api/report'
  import utils from '@/utils/utils'
  import permission from '@/directive/permission'
  //条件组件
  import queryDate from '@/components/Query/queryDate'
  import queryEmployee from '@/components/Query/queryEmployee'
  import queryShop from '@/components/Query/queryShop'
  import queryOffice from '@/components/Query/queryOffice'
  import queryProduct from '@/components/Query/queryProduct'
  import queryMember from '@/components/Query/queryMember'
  import queryProductCategory from '@/components/Query/queryProductCategory'
  import { list as shopList } from '@/api/shop'

  export default {
    name: 'allocateReport-list',
    data() {
      return {
        printing:10000,
        shopIdOptions:[],
        query: {
          outShopId:'',
          inShopId:'',
          productCategoryId: '',
          officeId: '',
          employeeId:'',
          endDate: '',
          beginDate: '',
          productId: '',
          memberId: ''
        },
        tableData: [],
        curHeight: null,
        pageSize: 20,
        total: 0,
        pageNum: 1,
        summaryForm: {
          quantity: 0,
          discount: 0,
          totalCost: 0,
          maoli: 0,
          maolilv: 0,
          totalAmt: 0
        },
        headerType:false,
         shopname:"",
        membername:"",
        proname:"",inShopId:""
      }
    },
    directives: {
      elDragDialog
    },
    created() {
      var _this = this
      // _this.summaryClick()
    },
    components: {
      Pagination,
      queryDate,
      queryShop,
      queryOffice,
      queryProduct,
      queryMember,
      queryProductCategory,
      queryEmployee,
      ExportList2Excel
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
    methods: {
    clickTr(row, event, column){
      //console.log(row["id"]) 跟下面效果一样
      console.log(row)//获取各行id的值
      this.clicklook(row)
     },
      clicklook(item){
        this.$router.push({
          path: '/allocateReport/allocateReportdetails',
         query: { productId:item.productId,
          beginDate:this.query.beginDate ,
                  endDate:this.query.endDate,
                  officeId:this.query.officeId,
                  shopname:this.shopname,
                  proname:item.name,
                  // proname:this.proname,
                  productCategoryId:this.query.productCategoryId,
                  membername:this.membername,
                  inShopId:this.query.inShopId,
                  outShopId:this.query.outShopId
 }
        })
      },
      clearIn(){
        this.query.inShopId=''
      },
      clearOut(){
        this.query.outShopId=''
      },
      queryEmployeeClick(data){
        this.query.employeeId = data.employeeId
      },

      //下载模板的函数
      handleExport() {
        let _this= this
        var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //要导出函数携带的参数
        //要导出函数携带的参数
        let data ={}
        data.tHeader = ["货号","商品名称","规格","单位","调拨数量","调拨单价",'销售金额']
        data.filterVal = ["sn","name","spec","unit","quantity","price",'totalAmt']
        data.filename = "调拨汇总列表";
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.printing)
        params.append('startDate', this.query.beginDate)
        params.append('inShopId',this.query.inShopId)
        params.append('productId',this.query.productId )
        params.append('productCategoryId',this.query.productCategoryId)
        params.append('endDate', this.query.endDate)
        params.append('outShopId',this.query.outShopId)
        allocateCountReport(params).then(res=>{
          data.list=res.data.data
          allocateSummary(params).then(response=>{
            response.data[0].sn='合计'
            data.list.push(response.data[0])
            _this.$refs.exportList2Excel.handleDownload(data);
            loading.close();
          })
          if(data.list.length==this.printing){
            this.pageNum++
             console.log(this.pageNum);
             this.handleExport()
          }
          else{
            return;
          }
        }).catch(error=>{
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })
        _this.$refs.exportList2Excel.handleDownload(data);
      },
      getShop () { // 获取仓库
        shopList().then(res => {
          res.data.data.forEach((option, index) => {
            const obj = {
              value: option.id,
              label: option.name
            }
            this.$set(this.shopIdOptions, index, obj)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      queryDateClick(data) {
        this.query.beginDate = data.beginDate
        this.query.endDate = data.endDate
      },
      queryShopClick(data){
        console.log(data)
        this.query.shopId = data.shopId
             this.shopname=data.name
      },
      queryOfficeClick(data){
        this.query.officeId = data.officeId
      },
      queryProductClick(data){
        this.query.productId = data.productId
        this.proname = data.proname
      },
      queryMemberClick(data){
        this.query.memberId = data.memberId
        this.membername=data.membername
      },
      queryProductCategoryClick(data){
        this.query.productCategoryId = data.productCategoryId
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            var headerHeight = _this.$refs.headerHeight.clientHeight
            _this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        console.log('222')
        var _this = this
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        var headerHeight = _this.$refs.headerHeight.clientHeight
        this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
      },
      loadOrder() {
        var _this = this
        console.log(this.query)
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('productId',this.query.productId )
        params.append('productCategoryId',this.query.productCategoryId)
        params.append('inShopId',this.query.inShopId)
        params.append('outShopId', this.query.outShopId)
        allocateCountReport(params).then(response => {
          console.log(response)
          _this.tableData = response.data.data
          _this.total = response.data.total
          _this.summaryClick()
        }).catch(error => {})
      },
      summaryClick() {
        var _this = this
        const params = new URLSearchParams()
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('productId',this.query.productId )
        params.append('productCategoryId',this.query.productCategoryId)
        params.append('outShopId', this.query.outShopId)
        params.append('inShopId',this.query.inShopId)
        allocateSummary(params).then(response => {
          // _this.summaryForm = response.data[0]
          if (response.data[0] !=null && response.data.length > 0){
            _this.tableData.push(response.data[0])
          }
        }).catch(error => {})
      },
      totalLine({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        var _this = this
        if (rowIndex === _this.tableData.length - 1) {
          if (columnIndex === 0) {
            return {
              rowspan: 1,
              colspan: 5
            };
          } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      chooseClick(){
        this.headerType = !this.headerType
        this.comeIn()
      }
    }
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }
    .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
.justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/.el-header {
    padding: 10px;
    height: 100% !important;
    padding-bottom: 0;
  }
  .primary{
    margin-left: 10px;
  }
  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
  }


  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 130px;
    margin-top: 5px;
  }
  /deep/.el-button{
    height: 35px;
  }
  .report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
    margin-top: 5px;
  }

  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }

  /deep/.el-footer {
    padding: 10px;
    padding-top: 0;
  }

  .report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }





  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    background-color: white;
  }

  /deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #F5F7FA;
  }

  /deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
  }

  /deep/.el-table::before {
    height: 0px;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
  }

  /deep/.pagination-container {
    margin-top: 0 !important;
  }
</style>
